<template>
  <div class="cephalic">
    <img
      src="../../../components/My/image/weibiaoti.png"
      alt=""
      class="return"
      style="width: 40px; height: 52px"
      @click="feet()"
    />
    <div class="major">
      <div class="major-a">
        <p>设置</p>
        <input type="text" placeholder="个人信息" />
        <img
          @click="goMyprofile"
          src="../../../components/My/image/changyongicon-.png"
          alt=""
        />
      </div>
    </div>
    <div class="xia">
      <div class="major-b">
        <input type="text" placeholder="账号安全" />
        <img
          @click="goMysafety"
          src="../../../components/My/image/changyongicon-.png"
          alt=""
        />
      </div>
    </div>
    <div class="xia">
      <div class="major-b">
        <input type="text" placeholder="清理缓存" />
        <span
          style="
            position: relative;
            left: 480px;
            top: -35px;
            font-size: 22px;
            color: #999999;
          "
          @click="eliminate()"
          v-text="shuju"
        >
          {{ shuju }}
        </span>
        <img src="../../../components/My/image/changyongicon-.png" alt="" />
      </div>
      <div class="btns">
        <button class="btn" @click="tui()">点击退出</button>
        <button class="btn1" @click="destroy()">注销账号</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      shuju: "92.59MB",
    };
  },
  methods: {
    goMyprofile() {
      this.$router.push({ path: "/myprofile" });
    },
    goMysafety() {
      this.$router.push({ path: "/mysafety" });
    },
    eliminate() {
      Dialog.confirm({
        title: "提示",
        message: "确认要清除缓存吗",
      })
        .then(() => {
          // on confirm
          this.shuju = "0MB";
          console.log(111);
        })
        .catch(() => {
          // on cancel
        });
    },
    destroy() {
      Dialog.confirm({
        title: "注销账号",
        message:
          "当前账户注销后无法正常使用软件，且相关数据完全清除，是否确定注销？",
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    feet() {
      this.$router.go(-1);
    },
    tui() {
      this.$router.go(-1);
    },
  },
};
</script>

<style loag="scss" scoped>
.cephalic {
  width: 750px;
  height: 1624px;
}

.return {
  display: block;
  width: 12px;
  height: 24px;
  margin-top: 50px;
  margin-left: 50px;
}
.major {
  width: 750px;
}
.major .major-a {
  width: 618px;
  height: 154px;
  margin: 0 auto;
  margin-top: 64px;
  position: relative;
  border-bottom: 1px solid rgb(65, 60, 60);
}
.major-a p {
  font-size: 32px;
}
.major-a input {
  width: 618px;
  height: 50px;
  font-size: 28px;
  margin-top: 20px;
  border: none;
}
.major-a img {
  width: 40px;
  height: 52px;
  position: absolute;
  left: 570px;
  top: 60px;
}
.xia {
  width: 750px;
}
.xia .major-b {
  width: 618px;
  height: 104px;
  margin: 0 auto;
  margin-top: 64px;
  position: relative;
  border-bottom: 1px solid rgb(65, 60, 60);
}
.major-b input {
  width: 618px;
  height: 50px;
  font-size: 28px;
  margin-top: 20px;
  border: none;
}
.major-b img {
  width: 40px;
  height: 52px;
  position: absolute;
  left: 570px;
  top: 20px;
}
.btns {
  width: 750px;
  height: 300px;
  margin-top: 200px;
}
.btn {
  display: block;
  width: 260px;
  height: 72px;
  border: 1px solid #707070;
  font-size: 24px;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 50px;
}
.btn1 {
  display: block;
  width: 90px;
  height: 28px;
  font-size: 20px;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 50px;
  border: none;
}
</style>
